<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Susyboot Grid Examples</title>
    <link href="../css/susyboot.css" type="text/css" rel="stylesheet" media="all" />
    <style>
        body [class^=col-] {
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: rgba(86,61,124,.15);
            border: 1px solid rgba(86,61,124,.2);
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
        }
        h1,h2 {
            text-align: center;
            border-bottom: 1px solid #ccc;
            padding: 0.4em;
            font-family: inherit;
            font-weight: 500;
            line-height: 1.1;
            color: inherit;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        h1 {
            font-size: 36px;
        }
        h2 {
            font-size: 30px;
            margin-bottom: 0.8em;
        }
    </style>
</head>
<body>

<h1>Susyboot Grid Examples</h1>

<h2>Basic columns</h2>
<div class="container">
    <div class="row">
        <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">.col-xs-3 .col-sm-4 .col-md-5 .col-lg-6</div>
        <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">.col-xs-3 .col-sm-4 .col-md-5 .col-lg-6</div>
        <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">.col-xs-3 .col-sm-4 .col-md-5 .col-lg-6</div>
        <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">.col-xs-3 .col-sm-4 .col-md-5 .col-lg-6</div>
    </div>
</div>
<h2>Offset</h2>
<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </div>
</div>
<h2>Offset override</h2>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4
        </div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4
        </div>
        <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">.col-xs-6 .col-xs-offset-3 .col-sm-4 .col-sm-offset-0
        </div>
    </div>
</div>
<h2>Nesting columns</h2>
<div class="container">
    <div class="row">
        <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
                <div class="col-xs-8 col-sm-6">
                    Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6">
                    <div class="row">
                        <div class="col-xs-8 col-sm-6">
                            Level 3: .col-xs-8 .col-sm-6
                        </div>
                        <div class="col-xs-4 col-sm-6">
                            Level 3: .col-xs-4 .col-sm-6
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<h2>Column ordering</h2>
<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
    </div>
</div>
<h2>Fluid container</h2>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">.col-xs-3 .col-sm-4 .col-md-5 .col-lg-6</div>
        <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">.col-xs-3 .col-sm-4 .col-md-5 .col-lg-6</div>
        <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">.col-xs-3 .col-sm-4 .col-md-5 .col-lg-6</div>
        <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">.col-xs-3 .col-sm-4 .col-md-5 .col-lg-6</div>
    </div>
</div>

</body>
</html>
